<template>
  <div class="qa-wrappper">
    <template  v-for="(i, d) in qadata">
      <div class="qa"  :key="i" v-show="d.show">
          <div class="title" v-show="d.type === 'title'">{{d.title}}</div>
          <template v-if="d.type==='title'">
              <template v-for="(j, c) in d.children">
                <qa-item :d="c" :key="j"></qa-item>
              </template>
          </template>
          <template v-else>
            <qa-item :d="d" :key="i"></qa-item>
          </template>
          <div class="progress">{{(currentPage+1) + '/' + qadata.length}}</div>
      </div>
    </template>
    <div class="flex flex_center">
        <button @click="goPage(-1)" :disabled="currentPage === 0" class="longBtn mr20">上一题</button>
        <button @click="goPage(1)" v-if="currentPage !== (qadata.length - 1)" class="longBtn">下一题</button>
        <button @click="submit" v-else class="longBtn">提交</button>
    </div>
    <!--<mu-flexbox class="qa-login login bgwhite">-->
      <!--<mu-flexbox-item>-->
        <!--<mu-raised-button label="上一题" primary fullWidth class="btn-login" @click="goPage(-1)" :disabled="currentPage === 0">-->
        <!--</mu-raised-button>-->
        <!--</mu-flexbox-item>-->
        <!--<mu-flexbox-item>-->
           <!--<mu-raised-button label="下一题" primary fullWidth class="btn-login" @click="goPage(1)" v-if="currentPage !== (qadata.length - 1)" ></mu-raised-button>-->
             <!--<mu-raised-button label="提交" fullWidth primary class="btn-login" @click="submit" v-else></mu-raised-button>-->
        <!--</mu-flexbox-item>-->
    <!--</mu-flexbox>-->
  </div>
</template>

<script>
import Public from '../../assets/public.js'
import {formatDate} from '../../assets/public'
import QaItem from './QaItem'

const QA_TYPE = {
  radio: '单选',
  checkbox: '多选',
  input: '填空'
}
export default {
  props: ['qadata', 'defaultQadata'],
  components: {QaItem},
  data () {
    return {
      QA_TYPE: QA_TYPE,
      patientInfo: JSON.parse(sessionStorage.getItem('patientInfo')),
//      currentPlan: JSON.parse(localStorage.currentPlan),
      disabled: false,
      currentPage: 0
    }
  },
  ready () {

  },
  watch: {
    'qadata' (newval, oldval) {
      console.log(newval)
      this.qadata = newval
    }
  },
  methods: {
    goPage (page) {
      this.currentPage += page
      this.qadata.forEach((v, i) => {
        v.show = i === this.currentPage
      })
    },
    validateData () {
      return false
    },
    submit () {
      let p = this.patientInfo
      console.log('patientInfo=' + JSON.stringify(p))
      let df = this.defaultQadata
      let params = {
        SFJH: p.GZID,
        TXGH: '12332', // test
        BRLX: p.BRLX,
        JLXH: 0,
        ZYH: p.BRLX === '1' ? p.ZYHM : p.ZYH,
        BRBQ: p.BRBQ || null,
        YSXH: df.YSXH,
        BBH: df.BBH,
        YSLX: df.YSLX,
        TXSJ: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        JGID: 1,
        PGNR: '',
        TXXM: p.BRXM,
        details: this.getAllList(this.qadata)
      }
      $.ajax({
        type:"POST",
        url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/commit/record",
        headers: {
          "token": sessionStorage.getItem('sfToken')
        },
        contentType: 'application/json',
        data:JSON.stringify(params),
        beforeSend: function (req) {
          req.setRequestHeader("Accept", "application/json");
        },
        success:function(res){
          if (res.Data) {
            Public.ajaxPrompt("保存成功")
          } else {
            Public.ajaxPrompt("提交失败")
          }
        },
        error: function () {
          Public.ajaxPrompt("后台报错")
        }
      })
    },
    getAllList (arr) {
      let temp = []
      if (arr.length === 0) {
        return temp
      }
      arr.forEach(val => {
        if (val.type === 'title' && val.children && val.children.length > 0) {
          val.children.forEach(v => {
            // type=checkbox合并选项为 a,b,c,d
            // 保持和出参一致
            if (v.type === 'input') {
              temp = temp.concat(this.getInputList(v))
            // checkbox
            } else if (v.type === 'checkbox') {
              temp = temp.concat(this.getCheckboxList(v))
            } else if (v.type === 'radio') {
              temp = temp.concat(this.getRadioList(v))
            }
          })
        } else {
          // input
          if (val.type === 'input') {
            temp = temp.concat(this.getInputList(val))
          // checkbox
          } else if (val.type === 'checkbox') {
            temp = temp.concat(this.getCheckboxList(val))
          } else if (val.type === 'radio') {
            temp = temp.concat(this.getRadioList(val))
          }
        }
      })
      return temp
    },
    getInputList (val) {
      // todo
      let temp = []
      val.options.forEach(v => {
        if (v.model && v.model.length > 0) {
          temp.push({
            XMNR: v.model,
            KJLX: v.KJLX,
            XMXH: v.XMXH
          })
        }
        if (v.children && v.children.length > 0) {
          temp = temp.concat(this.getAllList(v.children))
        }
      })
      return temp
    },
    getRadioList (val) {
      // todo
      let temp = []
      if (val.model.length > 0) {
        temp.push({
          XMNR: val.model,
          KJLX: val.KJLX,
          XMXH: val.XMXH
        })
      }
      val.options.forEach(v => {
        if (v.children && v.children.length > 0) {
          temp = temp.concat(this.getAllList(v.children))
        }
      })
      return temp
    },
    getCheckboxList (val) {
      // todo
      let temp = []
      if (val.model.length > 0) {
        temp.push({
          XMNR: val.model.join(','),
          KJLX: val.KJLX,
          XMXH: val.XMXH
        })
      }
      return temp
    }
  }
}
</script>

<style lang="less">
@import '../../assets/vars.less';
@import '../../assets/flex.css';
.qa-login {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
.qa {
  border-bottom: 1px solid @color-border;
  border-top: 3px solid @color-primary;
  background:#fff;
  margin-bottom: 1em;
  padding: 10px;
  .title {
    color:#999;
    padding-bottom: 1em;
  }
  .progress {
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    top: 10px;
    border: 1px solid #ddd;
    line-height: 40px;
    text-align: center;
    color: #999;
  }
  .mu-text-field-input {
    border: 1px solid #eee;
    padding: 0 10px;
  }
  .qa-label {
    height: 18px;
    width: 40px;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    padding-left: 8px;
    &.qa-label-radio{
      background-image: url(../../assets/img/jsszy/tab_单选@2x.png);
      background-size: cover;
    }
    &.qa-label-checkbox {
      background-image: url(../../assets/img/jsszy/tab_多选@2x.png);
      background-size: cover;
    }
    &.qa-label-input {
      background-image: url(../../assets/img/jsszy/tab_填空@2x.png);
      background-size: cover;
    }
  }
  .qa-content {
    padding-top: 10px;
  }
}
.mr20{
  margin-right:20px;
}
</style>
